<html>
  <!--- Licensed to the Apache Software Foundation (ASF) under one -->
  <!--- or more contributor license agreements.  See the NOTICE file -->
  <!--- distributed with this work for additional information -->
  <!--- regarding copyright ownership.  The ASF licenses this file -->
  <!--- to you under the Apache License, Version 2.0 (the -->
  <!--- "License"); you may not use this file except in compliance -->
  <!--- with the License.  You may obtain a copy of the License at -->

  <!---   http://www.apache.org/licenses/LICENSE-2.0 -->

  <!--- Unless required by applicable law or agreed to in writing, -->
  <!--- software distributed under the License is distributed on an -->
  <!--- "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -->
  <!--- KIND, either express or implied.  See the License for the -->
  <!--- specific language governing permissions and limitations -->
  <!--- under the License. -->
  <!DOCTYPE html>

  <head lang="en-US"></head>
    <title>TVM RPC Test Page</title>
  </head>

  <meta http-equiv="origin-trial" content="Agx76XA0ITxMPF0Z8rbbcMllwuxsyp9qdtQaXlLqu1JUrdHB6FPonuyIKJ3CsBREUkeioJck4nn3KO0c0kkwqAMAAABJeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0Ojg4ODgiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjkxNzExOTk5fQ==">

  <script src="tvmjs_runtime.wasi.js"></script>
  <script src="tvmjs.bundle.js"></script>
  <script>
    // Global environment
    var tvmjsGlobalEnv = {};

    function customLog(message) {
      console.log(message);
      const d = document.createElement("div");
      d.innerHTML = message;
      document.getElementById("log").appendChild(d);
    };

    function clearLog() {
      const node = document.getElementById("log");
      while (node.hasChildNodes()) {
        node.removeChild(node.lastChild);
      }
    }

    function initProgressCallback(report) {
      document.getElementById("rpc-progress-tracker-label").innerHTML = report.text;
      document.getElementById("rpc-progress-tracker-progress").value = report.progress * 100;
    }

    function connectRPC() {
      const proxyUrl = document.getElementById("proxyUrl").value;
      const key = document.getElementById("proxyKey").value;
      const ndarrayCacheName = document.getElementById("cache-select").value;
      let ndarrayCacheUrl = new URL(ndarrayCacheName + "/", document.URL).href;
      let ndarrayCacheDevice = document.getElementById("ndarrayCacheDevice").value;

      if (ndarrayCacheName == "none" || ndarrayCacheName === undefined) {
        ndarrayCacheUrl = "";
      }

      // only works for once.
      const getImports = () => {
        return new EmccWASI();
      };

      new tvmjs.RPCServer(
        proxyUrl, key, getImports, customLog,
        ndarrayCacheUrl, ndarrayCacheDevice, initProgressCallback,
        tvmjsGlobalEnv.asyncOnRPCServerLoad);
    }

    async function loadCacheOption() {
      const select = document.getElementById("cache-select");
      try {
        const list = await (await fetch("/cache-list.json")).json()
        for (let i = 0; i < list.length; ++i) {
          const option = document.createElement("option");
          option.text = list[i];
          option.value = list[i];
          select.add(option);
        }
        if (list.length != 0) {
          select.value = list[0];
        }
      } catch (err) {}
    }
  </script>
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script>
  $(function(){
    $("#includeRPCPlugin").load("rpc_plugin.html");
  });
</script>
  <body onload="loadCacheOption()">
    <h1>TVM WebSocket RPC Server</h1>
    To use this page
    <ul>
      <li>Run "make" and "npm run bundle" to create the libraries.</li>
      <li>
        run "python -m tvm.exec.rpc_proxy --example-rpc=1" to start proxy.
      </li>
      <li>Click Connect to proxy.</li>
      <li>run "python tests/python/websock_rpc_test.py" to run the rpc client.</li>
    </ul>

    <h2>Options</h2>
    Proxy URL <input
      name="proxyrl"
      id="proxyUrl"
      type="text"
      value="ws://localhost:8888/ws"
    /><br />
    RPC Server Key <input
      name="serverkey"
      id="proxyKey"
      type="text"
      value="wasm"
    /><br />
    NDArrayCache -
    <select name="cache-name" id="cache-select">
      <option value="none">none</option>
    </select>
    CacheDevice -
    <select name="cache-device" id="ndarrayCacheDevice">
      <option value="webgpu">webgpu</option>
      <option value="cpu">cpu</option>
    </select>
    <br />
    <button onclick="connectRPC()">Connect To Proxy</button>
    <button onclick="clearLog()">Clear Log</button>
    <div id="progress">
      <label id="rpc-progress-tracker-label"> </label> <br>
      <progress id="rpc-progress-tracker-progress" max="100" value="100"> </progress>
    </div>
    <div id="includeRPCPlugin"></div>
    <div id="log"></div>
  </body>
</html>
